<template>
  <div class="container">
    <!-- 背景图片 -->
    <div class="img">
      <img
        src="../assets/摄图网_500639234_wx_手捧红心人类和心脏病的概念（非企业商用）.jpg"
        alt=""
      >
    </div>
    <!-- 表单登录 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="phonenumber"
        name="phonenumber"
        placeholder="请输入手机号"
        :rules="rules.phonenumber"
      >
        <i
          slot="left-icon"
          class="iconfont icon-mobile-check"
        ></i>
      </van-field>
      <van-field
        v-model="password"
        :type="inptype"
        name="password"
        placeholder="请输入密码"
        :rules="rules.password"
      >
        <i
          slot="left-icon"
          class="iconfont icon-suo1"
        ></i>
        <i
          slot="right-icon"
          :class="iconfont"
          @click="showpassword"
        ></i>
      </van-field>
      <div class="login-btn-wrap">
        <van-button
          block
          native-type="submit"
          class="login-btn"
          color=" #71c9ce"
          round
        >登录</van-button>
      </div>
      <!-- 其他部分 -->
      <div class="others">
        <span @click="forget">忘记密码</span>
        <span @click='newuser'>注册</span>
      </div>
    </van-form>
  </div>

</template>

<script>
function validator (val) {
  return !(val.length < 0)
}
export default {
  name: '',
  components: {},
  data () {
    return {
      phonenumber: '',
      password: '',
      rules: {
        phonenumber: [{ required: true, message: '手机号不能为空' }, { pattern: /^1[3|5|7|9|8]\d{9}$/, message: '手机号格式错误' }],
        password: [{ required: true, message: '密码不能为空' }, { validator, message: '密码不能为空' }]
      },
      inptype: 'password',
      iconfont: 'iconfont icon-icon-test1'
    }
  },
  mounted () { },
  created () { },
  methods: {
    // 登录按钮
    onSubmit () { console.log(111) },
    // 显示密码框的密码
    showpassword () {
      // 更改密码框的Input类型
      this.inptype = this.inptype === 'password' ? 'text' : 'password'
      // 更改密码框图标显示状态
      this.iconfont = this.iconfont === 'iconfont icon-icon-test1' ? 'iconfont icon-icon-test' : 'iconfont icon-icon-test1'
    },
    // 忘记密码按钮
    forget () {
      this.$router.push('/forgetpassword')
    },
    // 注册新用户
    newuser () {
      this.$router.push('/regist')
    }
  }
}
</script>

<style lang="less" scoped>
.icon-icon-test,
.icon-suo1,
.icon-mobile-check {
  color: #71c9ce;
}
.icon-icon-test1 {
  color: #ec0101;
}
/deep/.van-form {
  margin: 0 24px;
}
.icon-suo1,
.icon-mobile-check {
  margin-right: 20px;
}
.login-btn-wrap {
  margin: 30px 10px;
}
.van-button--normal {
  font-size: 16px;
}
.others {
  display: flex;
  font-size: 14px;
  color: #b5b5b5;
  justify-content: space-between;
}
.img {
  width: 100%;
  height: 200px;
}
.img img {
  height: 100%;
  width: 100%;
}
</style>
